<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="header-top">
          <div class="logo">
            <img src="../assets/img/jnj_logo.png"/>
            <span>门店主数据管理平台</span>
          </div>
          <el-menu class="header-nav" :default-active="headerIndex+''" mode="horizontal" @select="headerNavSelect">
            <el-menu-item :index="index+''"  v-for="(item,index) in headerNavs" :key="index">{{item.menuTitle}}</el-menu-item>
          </el-menu>
        </div>
        <div class="header-bottom">
          <div class="date">
            <img src="../assets/img/ic_calendar.png" class="icon"/>
            <span>{{dateTime}}</span>
          </div>
          <img src="../assets/img/ic_computer.png" class="icon"/>
          <el-breadcrumb  separator=">>">
            <el-breadcrumb-item >当前位置</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
            <el-breadcrumb-item >{{$route.meta.title}}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="account">
            <span style="margin-right: 20px">
               当前登录用户： {{userInfo.userName}}({{userInfo.userAccount}})
            </span>
            <img src="../assets/img/ic_close.png" @click="logout" class="icon"/>
          </div>
        </div>
      </el-header>
      <el-container class="bottom-container">
        <el-aside width="180px">
          <div class="box-title" style="font-weight: bold;">
            导航菜单
          </div>
          <el-menu class="main-nav"  :default-active="mainIndex">
            <el-menu-item :index="item.menuId" v-for="(item,index) in mainNavs" :key="item.menuId"  @click="menuClick(item.navigateUrl)"><img :src="'/static/img/32/'+item.menuImg">{{item.menuName}}</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    import {setToken,getToken} from "../util";

    export default {
        name: 'Home',
        data () {
            return {
                headerNavs:[],
                userInfo:{},
                headerIndex:0,
                mainNavs:[],
                mainIndex:'',
                dateTime:''
            }
        },
        methods:{
            headerNavSelect(key) {
                this.headerIndex = key
                this.mainNavs = this.headerNavs[key].maps
            },
            logout() {
                this.$confirm('确定退出管理系统吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    setToken('')
                    window.location.href = '/Frame/LoginMDM.htm'
                });
            },
            addDate() {
                let nowDate = new Date();
                let date = {
                    year: nowDate.getFullYear(),
                    month: nowDate.getMonth() + 1,
                    date: nowDate.getDate(),
                }
                console.log(date);
                let systemDate = date.year + '年' + date.month + '月' + date.date + '日' + " 星期" + "日一二三四五六".charAt(nowDate.getDay());;
                this.dateTime = systemDate
            },
            menuClick(url) {
                if (url == this.$route.path) {
                    window.location.reload()
                    return
                }
                this.$router.push({path:url})

            },
            getUserInfo() {
                this.$http.get(this.$api.API_SYSTEM_USER_INFO,{token:getToken()}).then(resp=>{
                    console.log(resp, 'resprespresp');
                    this.headerNavs = resp.items
                    this.userInfo = resp.userInfo

                    localStorage.setItem("userinfo",JSON.stringify(resp.userInfo))

                    let currentHeaderName = this.$route.matched[0].meta.title
                    let path = this.$route.path
                    for (let i=0;i<this.headerNavs.length;i++) {
                        if (currentHeaderName == this.headerNavs[i].menuTitle) {
                            this.mainNavs = this.headerNavs[i].maps
                            this.headerIndex = i
                            break
                        }
                    }
                    for (let i=0;i<this.mainNavs.length;i++) {
                        if (path == this.mainNavs[i].navigateUrl) {
                            this.mainIndex = this.mainNavs[i].menuId
                        }
                    }
                })
            }
        },
        created() {
            this.addDate()
            this.getUserInfo()
        },
    }
</script>

<style lang="less" scoped>
.home {
  height: 100%;
}
  .el-header{
    color: #333;
    line-height: 70px;
    height: 94px !important;
    vertical-align: center;
    padding: 0px;
    .header-top{
      width: 100%;
      height: 70px;
      line-height: 70px;
      background-color: #d51900;
      position: relative;
    }
    .header-bottom{
      height: 23px;
      line-height: 23px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      color: #222;
      font-weight: bold;
      background-image: url("../assets/img/heder_bottom_bg.png");
      .icon{
        width: 20px;
        height: 20px;
      }
      span{
        margin-left: 5px;
      }
      .date{
        width: 180px;
        padding-left: 20px;
        line-height: 23px;
        height: 23px;
        display: flex;
        align-items: center;
      }
      .account{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 5px;
        align-items: center;
      }
    }
  }
  .el-container {
    height: 100%;
  }
  .bottom-container {
    height: calc(100% - 94px);
  }
  .el-aside{
    border-right: 1px solid #ccc;
  }
  .el-main{
    padding: 0px;
  }
  .el-main>div {
    width: fit-content;
    min-width: 100%;
  }
  .header-nav {
    display: inline-block;
    float: right;
    position: absolute;
    background: #d51900;
    bottom: 0;
    right: 0;
    border-bottom: 0;
    .el-menu-item{
      height: 38px;
      line-height: 38px;
      width: 105px;
      font-size: 11pt;
      text-align: center;
      padding: 0px;
      background: #d51900;
      color: white;
      font-weight: bold;
      border: 1px solid #fff;
      border-radius: 10px 10px 0 0;
      &.is-active{
        border-bottom: 0;
        color: #d51900 !important;
        background: white;
      }
    }
  }

  .main-nav{
    border-right: 0;
    .el-menu-item{
      display: block;
      height: 40px;
      line-height: 40px;
      text-indent: 7px;
      text-decoration: none;
      background: url("../assets/img/main_nav_btn_bg.png") no-repeat scroll -1px 0px;
      color: #222;
      font-weight: bold;
      cursor: pointer;
      font-size: 9pt;
      padding: 0 !important;
      img{
        width: 28px;
        height: 28px;
        padding-top: 7px;
        padding-left: 6px;
        margin-right: 2px;
        float: left;
      }
      &.is-active{
        color: #d51900 !important;
      }
    }
  }

  .el-breadcrumb {
    line-height: 23px;
  }
  .logo{
    height: 100%;
    display: inline-flex;
    margin-left: 20px;
    align-items: center;
    img{
      height: 36px;
    }
    span{
      font-size: 20px;
      font-weight: bold;
      color: white;
      margin-left: 20px;
    }
  }
  .box-title {
    height: 27px;
    line-height: 25px;
    text-indent: 7px;
    background: url(../assets/img/datagrid_header_bg.gif) repeat-x;
  }
  .main-label{
    border: #ccc 1px solid;
    border-bottom: 0;
    background-image: url(../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    height: 27px;
    line-height: 27px;
    font-weight: bold;
    padding-left: 5px;
  }
</style>
